<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			a {
				text-decoration: none;
				color: black;
			}
			
			#container {
				min-width: 370px;
			}
			
			#column {
				min-width: 370px;
				position: fixed;
				top: 0px;
				left: 0px;
				z-index: 10;
				width: 100%;
				height: 50px;
				background-color: #202E41;
				color: white;
			}
			
			.back {
				float: left;
				margin-top: 13px;
				margin-left: 10px;
			}
			
			.photo {
				float: right;
				margin-right: 10px;
				margin-top: 13px;
			}
			
			#column a {
				color: white;
			}
			
			#column span {
				line-height: 50px;
			}
			
			.titil {
				position: absolute;
				left: 46%;
				font-size: 18px;
			}
			
			.backphoto {
				width: 100%;
				display: block;
			}
			
			.touxiang {
				border: 2px solid white;
				width: 60px;
				position: absolute;
				right: 15px;
				bottom: -20px;
			}
			
			#backimg {
				position: relative;
				margin-bottom: 20px;
			}
			
			#backimg span {
				position: absolute;
				color: white;
				right: 85px;
				bottom: 5px;
			}
			#content .item{
				padding:10px 5px;
			}
			#content .left{
				float: left;
				width: 50px;
			}
			#content .left>img{
				width: 100%;
				display: block;
			}
			#content .right{
				margin-left: 57px;
				/*border: 1px solid;*/
			}
			#content .it1>a{
				font-size: 13px;
				color: #576B95;
			}
			#content{
				font-size: 13px;
			}
			#content .item .right>div{
				margin: 5px 0px;
			}
			#content .control-1{
				width: 200px;
			}
			#content .control-1 img{
				width: 100%;
				/*display: block;*/
			}
			#content .control-4{
				width: 240px;
				/*border: 1px solid;*/
			}
			#content .control-4 img{
				width: 90px;
				height: 90px;
				/*display: block;*/
			}
			#content .control-9{
				width: 310px;
			}
			#content .control-9 img{
				width: 90px;
				height: 90px;
				/*display: block;*/
			}
			#content .it4>span{
				font-size: 12px;
				color: #B1B1B1;
				display: block;
				float: left;
				border: 1px solid;
			}
			#content .it4{
				overflow: hidden;
			}
			#content .it4>img{
				width: 22px;
				margin-top: 2px;
				float: right;
			}
			#content .it5{
				background-color: #EEEEEE;
			}
			#content .it5 .dianzan>img{
				width: 16px;
				position: relative;
				top: 3px;
			}
			#content .it5 a{
				color: #576B95;
			}
			#content .it5 .pinglun{
				margin-top: 5px;
			}
			#content .it3 span{
				cursor: pointer;
			}
			#content .it3 span:active{
				position: fixed;
				top: 0px;
				left: 0px;
				z-index: 20;
				/*transition: ;*/
				width:100%;
				height: 100%;
				background-color: black;
			}
			#content .it3 span>img:active{
				width: 100%;
				margin-top: 50%;
				height: auto;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="column">
				<a class="back" href="#"><img src="img/jiantou.png" /></a>
				<span><a href="#">发现</a></span>
				<span class="titil">朋友圈</span>
				<a class="photo" href="#"><img src="img/xiangji.png" /></a>
			</div>
			<div id="backimg">
				<img class="backphoto" src="img/5.jpg" />
				<div><span>昵称dadfadsfasdfasdfads</span>
					<a><img class="touxiang" src="face/3.jpg" /></a>
				</div>
			</div>
			<div id="content">
				<div class="item">
					<div class="left">
						<img src="face/4.jpg" />
					</div>
					<div class="right">
						<div class="it1"><a href="#">昵称</a></div>
						<div class="it2">大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量</div>
						<div class="it3">
							<div class="control-9">
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/2.jpg"/></span>
								<span><img src="img/3.jpg"/></span>
								<span><img src="img/4.jpg"/></span>
								<span><img src="img/5.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
							</div>
						</div>
						<div class="it4"><span class="time">5分钟前</span> <img src="img/c.png"/> </div>
						<div class="it5">
							<div class="dianzan">
								<img src="img/l.png"/>
								<a href="#">成龙</a> ,
								<a href="#">李连杰</a> ,
								<a href="#">邓超</a> ,
								<a href="#">马云</a>
							</div>
							<div class="pinglun">
								<p>
									<a href="#">成龙</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
								<p>
									<a href="#">李连杰</a>：
									<span>阿拉丁房价啊龙卷风打法惊呆了房价啊房价啊龙卷风将阿里</span>
								</p>
								<p>
									<a href="#">马云</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="left">
						<img src="face/2.jpg" />
					</div>
					<div class="right">
						<div class="it1"><a href="#">昵称</a></div>
						<div class="it2">大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量</div>
						<div class="it3">
							<div class="control-9">
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/2.jpg"/></span>
								<span><img src="img/3.jpg"/></span>
								<span><img src="img/4.jpg"/></span>
								<span><img src="img/5.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/1.jpg"/></span>
							</div>
						</div>
						<div class="it4"><span class="time">5分钟前</span> <img src="img/c.png"/> </div>
						<div class="it5">
							<div class="dianzan">
								<img src="img/l.png"/>
								<a href="#">成龙</a> ,
								<a href="#">李连杰</a> ,
								<a href="#">邓超</a> ,
								<a href="#">马云</a>
							</div>
							<div class="pinglun">
								<p>
									<a href="#">成龙</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
								<p>
									<a href="#">李连杰</a>：
									<span>阿拉丁房价啊龙卷风打法惊呆了房价啊房价啊龙卷风将阿里</span>
								</p>
								<p>
									<a href="#">马云</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="left">
						<img src="face/1.jpg" />
					</div>
					<div class="right">
						<div class="it1"><a href="#">昵称</a></div>
						<div class="it2">大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量</div>
						<div class="it3">
							<div class="control-1">
								<span><img src="img/1.jpg"/></span>
							</div>
						</div>
						<div class="it4"><span class="time">5分钟前</span> <img src="img/c.png"/> </div>
						<div class="it5">
							<div class="dianzan">
								<img src="img/l.png"/>
								<a href="#">成龙</a> ,
								<a href="#">李连杰</a> ,
								<a href="#">邓超</a> ,
								<a href="#">马云</a>
							</div>
							<div class="pinglun">
								<p>
									<a href="#">成龙</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
								<p>
									<a href="#">李连杰</a>：
									<span>阿拉丁房价啊龙卷风打法惊呆了房价啊房价啊龙卷风将阿里</span>
								</p>
								<p>
									<a href="#">马云</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="left">
						<img src="face/4.jpg" />
					</div>
					<div class="right">
						<div class="it1"><a href="#">昵称</a></div>
						<div class="it2">大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量大的罚金疗法费拉拉了大量</div>
						<div class="it3">
							<div class="control-4">
								<span><img src="img/1.jpg"/></span>
								<span><img src="img/2.jpg"/></span>
								<span><img src="img/3.jpg"/></span>
								<span><img src="img/4.jpg"/></span>
							</div>
						</div>
						<div class="it4"><span class="time">5分钟前</span> <img src="img/c.png"/> </div>
						<div class="it5">
							<div class="dianzan">
								<img src="img/l.png"/>
								<a href="#">成龙</a> ,
								<a href="#">李连杰</a> ,
								<a href="#">邓超</a> ,
								<a href="#">马云</a>
							</div>
							<div class="pinglun">
								<p>
									<a href="#">成龙</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
								<p>
									<a href="#">李连杰</a>：
									<span>阿拉丁房价啊龙卷风打法惊呆了房价啊房价啊龙卷风将阿里</span>
								</p>
								<p>
									<a href="#">马云</a>：
									<span>阿拉丁房价啊龙卷风</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>

</html>